<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>普通订单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>

	<link rel="stylesheet" href="../css/css.css">
	<style type="text/css">
		.mui-control-content {
			/*background-color: white;
				min-height: 215px;*/
		}

		.mui-control-content {
			/*background-color: white;
				min-height: 215px;*/
		}

		.mui-control-content .mui-loading {
			margin-top: 50px;
		}

		.mui-title {
			color: #353535;
		}

		.mui-slider-indicator.mui-segmented-control {
			background: #ffffff;
		}

		.mui-bar {
			background: #ffffff;
		}

		.mui-bar-nav {
			top: 0;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		.mui-bar {
			border-bottom: 1px solid #E4E4E4;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		.mui-content {
			background: #f6f6f6;
		}

		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
			/*	margin-bottom: 0.133rem;*/
			background-color: #1C83FC;
		}

		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			color: #1C83FC;
		}

		.mui-segmented-control .mui-control-item {
			line-height: 1.28rem;
		}

		.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
			border: none;
		}

		.mui-bar .mui-title {
			font-size: 0.48rem;
			font-family: 'PingFangSC-Semibold';
		}

		.mui-col-xs-4 {
			width: 25%;
		}

		.mui-slider-indicator.mui-segmented-control {
			position: fixed;
			z-index: 999;
		}

		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
			position: fixed;
			top: 2.453rem
		}

		.mui-slider .mui-slider-group {
			margin-top: 1.57rem;
		}

		.mui-scroll-wrapper {
			position: static;
		}

		.mui-scroll {
			position: static;
		}

		.mui-table-view-cell {
			padding: 0;
			margin-bottom: 0.2667rem;
		}

		.mui-table-view-cell.mui-active {
			background-color: #ffffff!important;
		}

		.mui-table-view {
			background: #f6f6f6;
		}

		.mui-table-view-cell {
			position: static;
			background: #ffffff;
		}

		.mui-segmented-control .mui-control-item {
			font-size: 0.4rem;
		}

		html,
		body {
			height: 100%;
			background-color: #f6f6f6;
		}

		.top_nav {
			height: 50px;
			background-color: #FFFFFF;
			position: fixed;
			top: 44px;
			left: 0;
			z-index: 995;
			padding: 0 15px;
			width: 100%;
		}

		.top_bg {
			height: 60px;
			background-color: #F6F6F6;
		}

		.top_nav_item {
			width: 25%;
			float: left;
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-size: 14px;
			border-bottom: 1px solid transparent;
		}

		.top_nav .active {
			border-bottom: 1px solid #007aff;
		}

		.no_order {
			width: 100%;
			text-align: center;
			margin-top: 50px;
		}

		.no_order img {
			width: 50%;
		}

		.order_list_info_bottom_productBtn_right {
			margin-left: 0.2rem;
		}
		.order_list_info_bottom_productBtn{
			width: 4.667rem;
		}
		.order_list_info_bottom_productPic{
			width: 2.3rem;
		}
		.order_list_info_bottom_productNum{
			width: 1.3rem;
		}
		.order_list_info_bottom_productAdd{
			width: 0.8rem;
		}
	</style>
	<!--App自定义的css-->
	<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">订单</h1>
	</header>
	<div class="mui-content" id="order">
		<div class="top_nav">
			<div :class="(k+1)==now_nav_index?' top_nav_item active':' top_nav_item ' " v-for="i,k in top_nav" @click="change_nav(k)">
				<span v-html="i.name"></span>
			</div>

		</div>
		<div class="top_bg"></div>
		<div class="mui-scroll-wrapper" v-show="list.length>=1">
			<div class="mui-scroll">

				<ul class="mui-table-view">

					<li class="mui-table-view-cell" v-for="(daifas, index) in list">
						<div class="order_list_info_top">
							<!--{{daifas.busname}}-->
							<div class="order_list_info_top_text">{{daifas.busname}}</div>
							<div class="order_list_info_top_state">{{daifas.status|status_to_name}}</div>
						</div>
						<div class="order_list_info_container" @click="to_order_detail(daifas.orderid)" v-for="(orders,k) in daifas.goods">
							<div class="order_list_info_container_img">
								<img :src="orders.pic" />
							</div>
							<div class="order_list_info_container_right">
								<div class="order_list_info_container_right_text" v-html="orders.name"> </div>
								<div class="order_list_info_container_right_num"><span v-html="orders.rule"></span> X
									<span v-html="orders.num"></span>
								</div>
								<div class="order_list_info_container_right_price">￥
									<span v-html="orders.min_price.min_price"></span>
								</div>
							</div>
						</div>
						<div class="order_list_info_bottom">
							<div class="order_list_info_bottom_productNum">共
								<span v-html="daifas.num"></span> 件</div>
							<div class="order_list_info_bottom_productAdd">合计</div>
							<div class="order_list_info_bottom_productPic">￥
								<span v-html="daifas.money" style="font-size: 0.477rem;"></span>
							</div>
							<div class="order_list_info_bottom_productBtn">

								<div 
								v-show="daifas.status==1"
								class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" 
								id="wx_pay_btn" 
								@click="pay_order(index)"
								>付款</div>

								<div v-show="daifas.status==1" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @click="del_order(daifas.orderid)">撤销订单</div>

								<div v-show="daifas.status==2" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one"
								    @click="back_money(index)">{{daifas.is_refunt=='0'?'退款中':'申请退款'}}</div>
								<div v-show="daifas.status==2" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_three" @click="send_goods_msg">提醒发货</div>
								<div v-show="daifas.status==3" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @click="back_goods(daifas.orderid)">退货</div>
								<div v-show="daifas.status==3" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @click="confirm_order(daifas.orderid)">确认收货</div>
								

								<div v-show="daifas.status==4" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_two" @click="buy_again(index)">再次购买</div>
								<div v-show="daifas.status==4&&daifas.comment_status== '0' " class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @click="pinglun(index)">待评价</div>

							</div>
						</div>
					</li>

				</ul>

			</div>

		</div>
		<!--没有订单状态-->
		<div class="no_order" v-show="list.length<1">
			<img src="../images/no_order_bg.png" alt="" />
		</div>

	</div>
	<script src="../js/mui.min.js"></script>
	<script src="../js/vue.min.js"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/pay.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
	<script>
		Vue.filter("status_to_name", function (status) {
			//状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭）） 
			switch (status) {
				case 1:
					return "待付款"
					break;
				case 2:
					return "待发货"
					break;
				case 3:
					return "待收货"
					break;
				case 4:
					return "已完成"
					break;

				default:
					break;
			}
		})
		var app = new Vue({
			el: '#order',
			data: {
				uid: '',
				now_nav_index: 1,
				top_nav: [{
						name: '待付款',
						status: '1'
					},
					{
						name: '待发货',
						status: '2'
					},
					{
						name: '待收货',
						status: '3'
					},
					{
						name: '已完成',
						status: '4'
					}
				],
				list: [],

			},
			methods: {
				//获取订单数据
				get_order: function (uid, status, cb) {
					/*
					 
					 * arguments
					 * 		uid	用户ID
					 * 		status 订单状态
					 * 		cb 成功回调，将订单列表数据作为回调参数
					 * 		
					 * */

					$.ajax({
						type: 'get',
						url: 'https://zhapp.4hl.cn/api/order/getOrderLists',
						data: {
							uid: uid,
							status: status,
							type: 1
						},
						success: function (res) {
							if (typeof res == 'string') {
								res = JSON.parse(res)
							}
							if (res.code == 1) {
								cb(res.data)
							} else {
								if (window.plus) {
									plus.nativeUI.closeWaiting();
									mui.alert('网络连接出现问题')
								}
							}
						},
						error: function () {

							if (window.plus) {
								plus.nativeUI.closeWaiting();
								mui.alert('网络连接出现问题!')
							}

						}
					})
				},
				//更新显示数据
				up_data: function (status, uid) {
					console.log('up_data-->' + status + '-' + uid)
					var that = this;

					status = status + "";

					if (window.plus) {
						plus.nativeUI.showWaiting('加载中');
					}

					switch (status) {
						case "1":
							this.get_order(uid, 1, function (data) {
								console.log('待付款', data)
								that.list = data;
								if (window.plus) {
									plus.nativeUI.closeWaiting();
								}
								
								/*
								var btn = document.getElementById("wx_pay_btn");
								alert(JSON.stringify(btn))
								return
								if (btn) {
									btn.addEventListener("tap", function () {
										alert(1);
										return
										that.pay_order();
									})
								}
								*/

							}); //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））
							return "待付款"
							break;
						case "2":
							this.get_order(uid, 2, function (data) {
								console.log('待发货', data)
								that.list = data;
								if (window.plus) {
									plus.nativeUI.closeWaiting();
								}
							}); //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））
							return "待发货"
							break;
						case "3":
							this.get_order(uid, 3, function (data) {
								console.log('待收货', data)
								that.list = data;
								if (window.plus) {
									plus.nativeUI.closeWaiting();
								}
							}); //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））
							return "待收货"
							break;
						case "4":
							this.get_order(uid, 4, function (data) {
								console.log('已完成', data)
								that.list = data;
								if (window.plus) {
									plus.nativeUI.closeWaiting();
								}
							}); //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））
							return "已完成"
							break;

						default:
							break;
					}

				},
				//切换顶部按钮
				change_nav: function (k) {
					var status = k + 1;
					this.up_data(status, this.uid);
					this.now_nav_index = k + 1;

				},
				//付款
				pay_order: function (k) {
					
					pay_fun(this,k);
				},
			 
				//撤销订单
				del_order: function (orderid) {
					if(orderid){
						
						mui.confirm("确定撤销吗？","",['取消','确定'],function(e){
							if(e.index==1){
								$.ajax({
							type:"post",
							url:"https://zhapp.4hl.cn/api/order/cancelOrder",
							data:{
								orderid:orderid
							},
							success:function(res){
								res = JSON.parse(res);
								if(res.code==1){
									mui.toast("撤销成功");
									plus.webview.currentWebview().reload()
								}
							}
						});
							}
						})
						 
						
					}
				},	
				//退款
				back_money:function(k){
					var order = this.list[k] 
					
					if(order.is_refunt=="0"){
						mui.toast("您已提出退款申请，请耐心等待..");
						return
					};
					mui.prompt("请输入退款原因","请输入退款原因","退款原因",["取消","确定"],function(e){
						if(e.index==1){
							util.log("退款");
							util.log( "explain-->"+e.value);
							util.log("order_no-->"+order.order_no)
							 console.log(order.order_no)
							$.ajax({
								type:'get',
								url:'https://zhapp.4hl.cn/app/order/refundmoney',
								data:{
									order_no:order.order_no,
									explain:e.value,
								},
								success:function(res){
									util.log('success')
									util.log(res)
									res = JSON.parse(res);
									if(res.code==1){
										mui.toast("退款申请成功");
										plus.webview.currentWebview().reload()
									}
								},
								error:function(err){
									alert(err)
								}
								
								
							})
						}
					})
				},
				//退货
				back_goods: function (orderid) {
					mui.openWindow({
						url: 'shouhou_add_address.html?orderid='+orderid,
						id: 'shouhou_add_address.html',
					})
				},
				//提醒发货
				send_goods_msg: function () {
					alert("提醒发货")
				},
				//再次购买
				buy_again: function () {
					var goodsid = this.list[0].goods[0].goodsid;

					mui.openWindow({
						url: 'goods_detail.html?goodsid=' + goodsid,
						id: 'goods_detail.html',
					})
				},
				//跳转订单详情
				to_order_detail: function (order_id) {
					mui.openWindow('order_list_detail.html?order_id=' + order_id, 'order_list_detail.html')
				},
				//确认收货
				confirm_order: function (order_id, uid) {
					var uid = this.uid;
					//确认收货

					mui.confirm("确认收货吗？", "温馨提示", ["确认", "取消"], function (e) {

						if (e.index == 0) {
							$.ajax({
								type: "get",
								url: "https://zhapp.4hl.cn/api/order/takeGoods",
								async: true,
								data: {
									orderid: order_id,
									uid: uid
								},
								success: function (res) {
									res = JSON.parse(res)
									console.log(res)
									if (res.code == 1) {
										mui.toast("确认收货成功");
										if (window.plus) {
											mui.toast("确认收货成功")
											plus.webview.currentWebview().reload()
										} else {
											window.location.reload()
										}
									} else {
										mui.toast("确认收货失败")
									}
								},
								error: function (err) {
									mui.toast("服务器出问题了")
								}
							});
						} else {

						}
					}, "div")

				},
				//评论
				pinglun: function (k) {
					console.log(k);
					localStorage.setItem("pingjia_goods_info", JSON.stringify(this.list[k]))
					//跳转评价页面
					mui.openWindow('pinglun.html', 'pinglun.html')
				}

			},
			created: function () {
				//初始化数据
				var user = get_user_info();
				if (user) {
					this.uid = user.uid;
				} else {
					this.uid = ''
					mui.toast("未登录");
					setInterval(function () {
						mui.openWindow("logn.html", "logn.html")
					}, 1000)

				}

				var status = util.GetQueryString('status');
				if (!status) {
					status = 1
				}
				console.log(status);

				this.now_nav_index = status;

				var that = this;

				this.up_data(status, this.uid)

			},
			mounted: function () {
				mui.init({
					//				swipeBack: false
				});

			}
		})

		
	</script>

</body>

</html>
